<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="./CSS/demo8.css" rel="stylesheet">

</head>
<body>
<div id="root">
    <div class="mainA">
        <ul class="mainATop">
            <li class="mainATop_li" v-for="item in mainATop">
                <h3><a href="">{{item.title}}</a></h3>
                <p v-for="items in item.domNews"><a href="">{{items}}</a></p>
            </li>
            <li class="mainABottom">
                <div>
                    <img alt="" src="./images/demo8_yaowen.png">
                    <span>{{mainABottom.time}}</span>
                </div>
                <ul>
                    <li class="mainABottom_li" v-for="item in mainABottom.domNews"><a href="">{{item}}</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="mainB">
        <ul>
            <li class="mainBNews" v-for="item in mainB">
                <a href="">
                    <img :src="item.image" alt="">
                    <p class="mainBNews_a">{{item.cla}}{{item.title}}</p>
                    <p class="mainBNews_b">
                        <span>{{item.text}}</span>
                        <span>{{item.time}}</span>
                    </p>
                </a>
            </li>
        </ul>
    </div>
    <div class="mainC">
        <img src="./images/demo8_4.png" alt="">
    </div>

</div>

<script>
    new Vue({
        el: "#root",
        data() {
            return {
                mainATop: [
                    {
                        title: "习近平对台湾空难遇难者表示哀悼",
                        domNews: [
                            "习近平接受古巴勋章|老卡斯特罗：中俄应该领导新世界",
                            "李克强：企业最怕市场不透明|俞正声|刘云山打击谣言|大V"
                        ]
                    },
                    {
                        title: "台复兴航空载58人班机失事 48死10伤 名单",
                        domNews: [
                            "现场：民房被撞塌|乘客遗体挂墙上|村民称地狱：不知如何救援",
                            "经过：客机28米高摔 机头坠地|原因客机重飞迫降未好",
                            "澎湖空难：为外婆奔丧女乘客疑遭难 母崩溃痛苦|直播|专题"
                        ]
                    },
                    {
                        title: "美官员：MH17客机或遭乌民间武装误击",
                        domNews: [
                            "MH17一个黑匣子数据成功导出 无人为破坏迹象",
                            "荷兰国王赴机场接遇难者遗体|专题|图文直播"
                        ]
                    },
                    {
                        title: "山西纪委副书记杨森林被查 系令政策同学",
                        domNews: [
                            "杨森林曾是金道铭副手 主抓煤焦领域反腐"
                        ]
                    }
                ],
                mainABottom: {
                    title: "今日要闻",
                    time: "2014-7-24",
                    domNews: [
                        "中国昨日在境内成功进行陆基反导技术试验",
                        "李小琳：要懂大势、不出事、知历史",
                        "广东4个月内查处108名失职渎职警察",
                        "湖南政协原副主席童名谦24日在北京二中院受审",
                        "图解：如何把外套贪官抓回国",
                        "凤凰网招聘专题编辑、编译实习生"
                    ]
                },
                mainB: [
                    {image: "./images/demo8_1.png", title: "五年入狱结束后", text: "[在人间]", time: "14:59"},
                    {image: "./images/demo8_2.png", title: "枪杀孕妇民警被执行死刑", text: "[环球]", time: "14:59"},
                    {
                        image: "./images/demo8_3.png",
                        cla: "广告",
                        title: "《爸爸去哪儿2》走进苗寨怀化",
                        text: "[环球]",
                        time: "14:59"
                    },
                ]
            }
        }
    })
</script>
</body>
</html>